<template>
  <h1>首页</h1>
  <div class="block text-center">
    <span class="demonstration">欢迎回来</span>
    <el-carousel height="150px" autoplay>
      <el-carousel-item v-for="(emojiGroup, index) in emojiGroups" :key="index">
        <div class="emoji-group">
          <span v-for="emoji in emojiGroup" :key="emoji">{{ emoji }}</span>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div>
  </div>
</template>

<script>
import request from '../utils/request';
export default {
  data() {
    return {
      emojiGroups: [
        ["😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "🙃", "🙂", "🫠", "😉", "🥺", "😳", "😲", "😯", "😮", "☹", "🙁", "😟", "🫤", "😕", "😇", "😊", "🥹", "😦", "😨", "😰", "😥", "😢", "😭"],
        ["😱", "😖", "😣", "😞", "☠", "💀", "😈", "🤬", "😠", "😡", "😤", "🥱", "😫", "😩", "😓", "🤡", "👻", "👾", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾", "🙉", "🙊", "💌", "🥰", "😍"],
        ["🤩", "😘", "😗", "☺", "😚", "😙", "🥲", "😋", "😛", "😜", "🤪", "😝", "🤑", "🤗", "🤓", "😎", "🥸", "🤕", "🤒", "🥳", "🤠", "🤯", "😴", "😵‍💫", "😪", "🥴", "😵", "😔", "😌", "😶", "🙂‍↕️", "😑"]
      ]
    };
  },
  mounted() {
    // location.reload();
    /*
    const i=0;
    if(i===0){
      location.reload();
      i++;
    }
    */
  },
}
</script>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.emoji-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-size: 24px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
